<script setup lang="ts">
    import {ref, reactive} from 'vue'
    import {ElMessage, FormInstance, FormRules} from 'element-plus'
    import {useRouter} from 'vue-router'
    import axios from "../api";

    const router = useRouter()

    //表单验证
    interface UserForm {
        userName: String,
        password: String
    }

    const userForm = reactive<UserForm>({
        userName: '',
        password: ''
    })

    const rules = reactive<FormRules<UserForm>>({
        userName: [
            {required: true, message: '用户名不能为空', trigger: 'blur'},
            {pattern: /^[a-zA-Z0-9_-]{4,16}$/, message: '用户名格式错误', trigger: 'blur'},
        ],
        password: [
            {required: true, message: '密码不能为空', trigger: 'change',},
        ],

    })

    //表单提交
    const userFormRef = ref<FormInstance>()
    const submitForm = async (formEl: FormInstance | undefined) => {
        if (!userFormRef.value) return
        await userFormRef.value.validate((valid, fields) => {
            if (valid) {
                // fetch('http://localhost:8080/user/login', {
                //     method: 'POST',
                //     headers: {
                //         'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8'
                //     },
                //     body: `userName=${userForm.userName}&password=${userForm.password}`
                // }).then(response => {
                //     return response.json()
                // }).then(data => {
                //     console.log(data)
                //     if (data.code == 200) {
                //         //save token
                //         sessionStorage.setItem("token",data.data)
                //         router.push("/index")
                //     } else {
                //         ElMessage.error(data.message)
                //     }
                // })
                axios.post('/user/login', userForm)
                    .then(data => {
                        debugger
                        sessionStorage.setItem("token", data)
                        router.push("/index")
                    })
            } else {
                console.log(fields)
            }
        })
    }

    const resetForm = (formEl: FormInstance | undefined) => {
        if (!formEl) return
        formEl.resetFields()
    }

</script>
<template>
    <el-form ref="userFormRef" :model="userForm" :rules="rules" label-width="auto" style="max-width: 600px">
        <el-form-item label="用户名" prop="userName">
            <el-input v-model="userForm.userName" style="width: 240px" placeholder="请输入用户名"/>
        </el-form-item>
        <el-form-item label="密码" prop="password">
            <el-input v-model="userForm.password" type="password" style="width: 240px" placeholder="请输入密码"/>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="submitForm">登录</el-button>
            <el-button type="primary" @click="resetForm(userFormRef)">清除</el-button>
        </el-form-item>
    </el-form>
</template>
<style scoped>
    .centered-form-item {
        display: flex;
        justify-content: center;
        align-items: center;
    }
</style>
